<template>
  <div class="channel">
    <!-- 我的频道 -->
    <div class="myChannel">
      <div class="head">
        <span class="name">我的频道</span>
        <van-button
          @click="showCross = !showCross"
          type="danger"
          plain
          size="mini"
        >
          {{ showCross ? "取消" : "编辑" }}
        </van-button>
      </div>
      <!-- 列表 -->
      <van-grid :border="false">
        <van-grid-item
          @click="changIndex(index)"
          v-for="(item, index) in channelList"
          :key="index"
        >
          <template #text>
            <span :class="{ active: value === index }">{{ item.name }}</span>
            <van-icon
              v-show="showCross && index !== 0"
              class="mycross"
              name="cross"
              @click.stop="delChannels(index, item.id)"
            />
          </template>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 可选频道 -->
    <div class="myChannel">
      <div class="head">
        <span class="name">可选频道</span>
      </div>
      <!-- 列表 -->
      <van-grid :border="false">
        <van-grid-item
          v-for="(item, index) in selectChannels"
          :key="index"
          :text="item.name"
          @click="addChannels(item)"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getAllChannelAPI, addChannelAPI, delChannelAPI } from "@/api";
import { setChannel } from "@/utils/auth";
export default {
  props: ["channelList", "value"],

  data() {
    return {
      allChannels: [],
      showCross: false,
    };
  },
  methods: {
    delChannels(index, id) {
      this.channelList.splice(index, 1);
      if (this.value > index) {
        this.$emit("input", this.value - 1);
      }
      const token = this.$store.state.token.token;
      if (token) {
        delChannelAPI(id);
      } else {
        setChannel(this.channelList);
      }
      this.$toast.success("删除频道成功");
    },

    async addChannels(item) {
      this.channelList.push(item);
      const token = this.$store.state.token.token;
      if (token) {
        await addChannelAPI({
          channels: [
            {
              id: item.id,
              seq: this.channelList.length + 1,
            },
          ],
        });
      } else {
        setChannel(this.channelList);
      }
      this.$toast.success("新增频道成功");
    },

    changIndex(index) {
      this.$emit("input", index);
    },
  },

  computed: {
    selectChannels() {
      const channelsId = this.channelList.map((item) => {
        return item.id;
      });

      return this.allChannels.filter((item) => {
        // 剔除我的频道
        return !channelsId.includes(item.id);
      });
    },
  },

  async created() {
    const res = await getAllChannelAPI();
    this.allChannels = res.data.data.channels;
  },
};
</script>

<style lang="less">
.channel {
  font-size: 12px;
  .myChannel {
    .head {
      display: flex;
      justify-content: space-between;
      margin: 0 10px;
      align-items: center;
      margin-bottom: 10px;
    }
    .active {
      color: red;
    }
    .mycross {
      position: absolute;
      top: 0;
      right: 5px;
    }
  }
}
</style>